<template>
    <div class="bottom">
        <div class="tao" :class="{bgc:height<400,
                                    bgcN:height>=400}" @click="funTop"></div>
        <div class="cart" @click="funCart">
            <van-icon name="cart-o" size="0.48rem"/>
            <p>购物车</p>
        </div>
        <div class="mySelf" @click="funMy">
            <van-icon name="smile-o" size="0.48rem"/>
            <p>我的</p>
        </div>
    </div>
</template>

<script>
export default {
    name:"bottomNav",
    data(){
        return {
            height:0
        }
    },
    methods:{
        funTop(){
            window.scrollTo({
                top:0,
                behavior:"smooth"
            })
        },
        funMy(){
            if(localStorage.getItem("token")){
                this.$router.push("/my")
            } else {

                this.$router.push("/loginCode")
            }
        },
        funCart(){
            this.$router.push("/cart")
        }

    },
    mounted(){
        window.onscroll = () => {
            this.height = document.documentElement.scrollTop
        }
    }
}
</script>

<style lang="scss" scoped>
    .bottom {
        height: 0.9rem;
        width: 100%;
        background: #fff;
        position: fixed;
        bottom: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .bottom>div {
        width: 0.75rem;
        height: 0.75rem;
    }
    .bottom .tao {
        border-radius: 50%;
    }
    .bottom .bgc {
        background: #ff6e07 url("https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png") no-repeat center / 100%;
    }
    .bottom .bgcN {
        background: #ff6e07 url("https://img.alicdn.com/imgextra/i3/O1CN01r7d0bs1XQwqepToWX_!!6000000002919-2-tps-108-108.png") no-repeat center / 100%;
    }
    .bottom .cart {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        font-size: 0.2rem;
    }
    .bottom .mySelf {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        font-size: 0.2rem;
    }

</style>